<template>
    <div>
        <div>
            <input type="text" v-model="message" />
            <h1>{{ message }}</h1>
            <h1>{{ rmMessage }}</h1>
        </div>

        <div>
            <input type="text" v-model="number" />

            <hr>
            <button @click="changeLanguage('ch')">中文</button>|
            <button @click="changeLanguage('en')">英文</button>
            <h1>{{ name }}</h1>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CalAndLisAttr",
        data() {
            return {
                number: 1,
                message: '',
                language: 'ch',
                name: ''
            };
        },
        methods: {
          changeLanguage: function (val) {
              this.language = val;
          }
        },
        computed: {
            rmMessage: function () {
                return this.message.split('').reverse().join("");
            }
        },
        watch: {
            number: function (newVal, oldVal) {
                window.console.log('新值为:' + newVal, this.number, '旧值为: ' + oldVal);
            },
            language: {
                /**
                 * 功能:
                 *      这种写法是监听属性的另一种写法, 这种写法使immediate: true可以使页面加载完毕后立即执行这个方法.
                 */
                handler: function() {
                    if('ch' === this.language) {
                        this.name = '张三';
                    }
                    if('en' === this.language) {
                        this.name = 'zhangsan';
                    }
                },
                immediate: true
            }
        }
    }
</script>

<style scoped>

</style>